// 引入node的path工具类
const path = require('path')
// 导入该插件 在内存中自动生成index页面的插件
const HtmlWebPackPlugin = require('html-webpack-plugin')

// 创建一个插件的实例对象
const htmlPlugin = new HtmlWebPackPlugin({
    // __dirname => 指当前文件所处目录
    template :  path.join(__dirname,'./src/index.html') ,// 源文件
    filename: 'index.html'// 生成的内存中首页的名称
})
/**
 * webpack默认只能打包处理 .js后缀类型的文件,像.png, .vue无法主动处理,所以需要配置第三方的loader
 * js中的jsx也是处理不了的,也会在module中寻找第三方配置进行处理
 */
// 向外暴露一个对象. 这是node语法 webpack是基于node编写的.
module.exports={
    mode: 'development', // development/production
    plugins: [
        htmlPlugin
    ],
    module: { //所有第三方模块的配置规则
        rules: [ // 第三方匹配规则
            // 运行规则 => 从右往左运行loader, => 依次执行
            //创建匹配规则,使用该插件,添加排除项
            {test: /\.js|jsx$/, use: "babel-loader",exclude:/node_modules/},
            // 打包处理css样式表的loader (新版本中 -loader 不可省略)
            // 添加 ?modules 后,对css启用模块化,解决样式冲突问题.
            // => 使用后的表现是: css中的样式对外暴露了.
            // localIdentName => 意思是将css中的数据能显示
            {test: /\.css$/, use: ['style-loader', 'css-loader']},
            {test:/\.ttf|woff|woff2|eot|svg$/, use: "url-loader"}, // 打包处理 字体文件的loader
            // 打包处理scss文件的loader
            {test: /\.scss$/, use: ['style-loader', 'css-loader?modules&localIdentName=[path][name]-[local]-[hash:5]', 'sass-loader']},
        ]
    },
    resolve: {
        // 默认不全 js , json
        extensions: ['.js', '.jsx', '.json'], // 表示这几个文件的后缀名可以不写 .注意下顺序
        alias: {
            '@': path.join(__dirname,'./src') // 将@符号表示项目根目录下的src的这一层路径
        }
    }
    // entry: ""   指定打包入口路径
    // webapp4.x中,约定大于俗称,默认为src/index.js为打包入口路径
}